<template>
	<view class="content">
		<view class="back" :style="{paddingTop: top}">
			喆越汽车
			<view class="sousou">
				<u-search placeholder="搜索" v-model="keyword" bgColor="#fff" borderColor="#ddd" :showAction="false"
				disabled @click="goSearch"></u-search>
			</view>
			<view class="qiehuan" @click="changeLang(1)" v-if="language == 'zh_CN'">
				EN
			</view>
			<view class="qiehuan" @click="changeLang(2)" v-else>
				中文
			</view>
		</view>
		
		<view class="zhuBox" :style="{top: zhuTop}">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="imgUrl + item.banner_url" mode=""></image>
					</view> 
				</swiper-item>
			</swiper>
			
			<view class="searchBox">
				<u-search placeholder="搜索" disabled @click="goSearch" v-model="keyword" :showAction="false"></u-search>
			</view>
			
			
			<view class="shopBox">
				<view class="shopTitle">
					商品推荐
				</view>
				
				<!-- <button class='login-btn' open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">授权手机号</button> -->
				
				
				<view class="shopList">
					<block v-for="(item, index) in goodList" :key="index">
						<view class="shopli" @click="goDetail(item)">
							<view class="shopImg">
								<image :src="item.fengImg" mode=""></image>
							</view>
							<text class="pName">{{language == 'zh_CN'?item.product_name:item.product_egname}}</text>
							<text class="datee">{{item.createTime}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/utils/config.js';
	import { getProductList, getBannerList, getPhone } from '@/api/login.js';
	export default {
		data() {
			return {
				keyword: '',
				language: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				top: 0,
				zhuTop: 0,
				imgUrl: baseUrl,
				goodList: [],
				bannerList: [],
				queryItem:{
					pageNum: 1,
					pageSize: 10,
				}
			}
		},
		onLoad() {
			this.getList();
			this.getBanner();
		},
		created() {
			this.language = this.$i18n.locale;
			//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top = menuButtonInfo.top + 'px';
			this.zhuTop = menuButtonInfo.top  + 'px';
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods: {
			// 切换语言
			changeLang(type) {
				console.log(type)
				if(type == 1) {
					this.$i18n.locale = 'en_US';
					this.language = 'en_US';
					// uni.setStorageSync('locale','en_US');
				} else {
					this.$i18n.locale = 'zh_CN';
					this.language = 'zh_CN';
					// uni.setStorageSync('locale','zh_CN');
				}
			},
			// 获取手机号
			getPhoneNumber() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log(loginRes);
						getPhone({code: loginRes.code}).then(res=>{
							console.log(res);
						})
					}
				});
			},
			// 跳转到搜索页
			goSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				});
			},
			// 获取产品列表信息
			getList() {
				getProductList(this.queryItem).then(res=>{
					res.rows.forEach(item=>{
						item.fengImg = baseUrl + item.product_img.split(',')[0]
					})
					this.goodList = res.rows;
				});
			},
			// 获取轮播图信息
			getBanner() {
				getBannerList().then(res=>{
					this.bannerList = res.rows;
				});
			},
			// 跳转详情
			goDetail(val) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${val.id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		.zhuBox{
			position: absolute;left: 0;width: 100%;z-index: 99;
			.swiper{
				margin-bottom: 25rpx;height: 400rpx;margin-top: 80rpx; 
				image{
					width:100%;height: 400rpx;
				}
			}
			.searchBox{
				padding:0 25rpx;
			}
			.shopBox{
				padding:0 25rpx;
				.shopTitle{
					margin:30rpx 0;padding-left: 30rpx;border-left:8rpx solid #000;
				}
				.shopList{
					@include flx;flex-wrap: wrap;justify-content: space-between;
					.shopli{
						width: 48%;border:1px solid #ddd;border-radius: 15rpx;padding-bottom: 20rpx;margin-bottom:20rpx;
						.shopImg{
							image{
								width: 100%;border-radius: 15rpx 15rpx 0 0;
							}
						}
						text{
							display: block;@include baseFont(28rpx,#000,40rpx);padding:0 10rpx;
						}
						.pName{
							margin-top:10rpx;
						}
						.datee{
							color:#666;font-size:20rpx;
						}
					}
				}
			}
		}
		.back {
			color: #000;z-index: 99999;
			position: fixed;top: 0;
			left: 0;font-weight: bold;display: flex;flex-direction: row;align-items: center;
			line-height: 50rpx;background-color: #fff;padding-left: 25rpx;
			font-size: 34rpx;width: 100%;padding-bottom: 20rpx;
			.sousou{
				width: 330rpx;margin-left: 10rpx;
			}
			.qiehuan{
				margin-left:10rpx;
			}
		}
		.topBox{
			@include baseFont(40rpx,#000,1);font-weight: bold;
		}
	}
</style>
